<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
  <router-outlet />
</mat-tab-nav-panel>

<nav
  mat-align-tabs="center"
  mat-tab-nav-bar
  [disablePagination]="true"
  [tabPanel]="tabPanel"
>
  @for (tab of tabs; track tab) {
    @if (tab.showCondition !== false) {
      <a
        #rla="routerLinkActive"
        class="no-min-width px-3"
        mat-tab-link
        routerLinkActive
        [active]="rla.isActive"
        [routerLink]="tab.routerLink"
        [routerLinkActiveOptions]="{ exact: true }"
      >
        <ion-icon
          [name]="tab.iconName"
          [size]="deviceType === 'mobile' ? 'large' : 'small'"
        />
        <div class="d-none d-sm-block ml-2">{{ tab.label }}</div>
      </a>
    }
  }
</nav>
